<template>
  <el-drawer
    title="详情"
    :visible.sync="drawer"
    direction="rtl"
    size="456px"
  >
    <div class="drawer-content">
      <div class="company-detail">
        <div class="field2 f-r j-b">
          <div class="label">投诉类型</div>
          <div class="value">{{ detail.reportType }}</div>
        </div>
        <div class="field2 f-r j-b">
          <div class="label">投诉人</div>
          <div class="value">{{ detail.username }}</div>
        </div>
        <div class="field2 f-r j-b">
          <div class="label">投诉人手机号</div>
          <div class="value">{{ detail.phone }}</div>
        </div>
        <div class="field2 f-r j-b">
          <div class="label">投诉时间</div>
          <div class="value">{{ detail.reportTime }}</div>
        </div>
        <div class="field2 f-r j-b">
          <div class="label">投诉企业</div>
          <div class="value">{{ detail.enterpriseName }}</div>
        </div>
        <div class="field2 f-r j-b">
          <div class="label">投诉包装照片</div>
          <div class="upload">
            <img :src="detail.reportImg" style="width: 100%;height: 100%" alt="">
          </div>
        </div>
        <div class="field2 f-r j-b">
          <div class="label">投诉内容</div>
          <div class="value">{{ detail.reportContent }}</div>
        </div>

        <el-form style="margin-top: 20px">
          <el-form-item label="反馈结果">
            <el-input v-model="detail.resultsFeedback" clearable :disabled="detail.state != 0" type="textarea" :rows="5" />
          </el-form-item>
        </el-form>

        <div slot="footer" style="text-align: right;margin-top: 20px">
          <el-button @click="drawer = false">取消</el-button>
          <el-button v-if="detail.state == 0" type="primary" @click="onSave">处理</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { http_brand_audit } from '@/api';

export default {
  name: 'Detail1',
  data() {
    return {
      drawer: false,
      desc: '',
      detail: {

      }
    }
  },
  methods: {
    open(item) {
      http_brand_audit.read(item.id).then(res => {
        this.detail = res.data
      })
      this.drawer = true
    },
    onSave() {}
  }
}
</script>

<style scoped lang="scss">
.company-detail {
  .title {
    margin: 20px 0;
  }
  .field-box {
    position: relative;
  }
  .upload2 {
    width: 415px;
    height: 224px;
    background: rgba(240,240,240,0.39);
    border: 1px solid #DCDFE6;
    opacity: 1;
    border-radius: 4px;
  }
  .upload {
    margin-top: 13px;
    width: 102px;
    height: 102px;
    background: #F0F0F0;
    border: 1px solid #DCDFE6;
    opacity: 1;
    border-radius: 4px;
  }
  .field2 {
    width: 100%;
    border-bottom: 1px solid #E6E6E6;
    border-top: 1px solid #E6E6E6;
    padding: 13px 0;
    .label {
      font-size: 14px;

      font-weight: 400;
      line-height: 20px;
      color: #333333;
    }
    .value {
      font-size: 14px;

      font-weight: 400;
      line-height: 20px;
      color: #9A9A9A;
    }
  }
  .field1 {
    width: 299px;
    border-bottom: 1px solid #E6E6E6;
    padding: 13px 0;
    .label {
      font-size: 14px;

      font-weight: 400;
      line-height: 20px;
      color: #333333;
    }
    .value {
      font-size: 14px;

      font-weight: 400;
      line-height: 20px;
      color: #9A9A9A;
    }
  }
}
</style>
